import React, { useState, useEffect } from "react";
import { useRequest } from "ahooks";
import { NavBar, Grid } from "antd-mobile";
import { useNavigate, useParams } from "react-router-dom";
import { librarylistQuery } from "./sevice/bookService";
import style from "../book/css/Home.module.css";

export default function () {
  const navigate = useNavigate();
  const [data, setData] = useState([]);

  // 图书馆分类
  const listRes = useRequest(librarylistQuery, {
    onSuccess: (res) => {
      console.log(res);
      let list = res.data.rows.map((item) => {
        return {
          ...item,
        };
      });
      setData(list);
    },
  });
  useEffect(() => {
    listRes.run({});
  }, []);
  return (
    <div className={`base ${style.bookbody}`}>
      <NavBar
      style={{
        position: "fixed",
        top: "0",
        zIndex: "999",
        backgroundColor: "#fff",
        width: "100%",
      }}
        onBack={() => {
          navigate("/");
        }}
      >
        数字图书馆
      </NavBar>
      {/* 图书馆分类 */}
      <div className={`base ${style.content}`}>
        <div className={`base ${style.contentflex}`}>
          <Grid columns={1} gap={4}>
            {data.map((item, id) => {
              return (
                <Grid.Item
                  key={item.id}
                  onClick={()=>{navigate(`/book/${item.id}${item.name}`);}}
                >
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      flexDirection: "column",
                    }}
                  >
                    <img src={"http://124.93.196.45:10001/" + item.imgUrl} />
                    <span style={{ fontSize: "10px" }}>{item.name}</span>
                  </div>
                </Grid.Item>
              );
            })}
          </Grid>
        </div>
      </div>
    </div>
  );
}
